import { thin } from "../thin3.mjs";
import { after } from "./delay_render.mjs";
import { nearest_data } from "./nearest.mjs";
import render_helper from "./render_helper.mjs";
import thin_render from "./thin_render.mjs";

/**
 * 创建并渲染一个标签页(tab)组件
 * @param {HTMLElement} container - 容器元素，tab组件将被添加到这个容器中
 * @param {Object} template - 标签页配置模板，包含tab的结构和行为定义
 */
export default function tab_template(container, template) {
  // 获取当前URL的hash部分
  let currenthashpath = document.location.hash;
  // 设置默认激活的标签页索引
  let activeindex = template.tab.default || 0;
  let activeitem;

  let i = 0;
  // 创建tab根元素
  let tab = document.createElement("tab");

  container.appendChild(tab);
  // console.log({ template, type: typeof template.tab });

  // 处理数组类型的tab配置
  if (template.tab instanceof Array) {
    // 直接渲染数组配置
    thin_render(tab, template.tab);
    // 遍历所有a标签，根据href匹配当前路径来设置激活状态
    thin("a", tab).each((node) => {
      let href = node.getAttribute("href");
      if (href) {
        let reg = RegExp(
          "^".concat(node.getAttribute("href").toLowerCase(), "(?=$|/)"),
          "i"
        );
        if (reg.test(currenthashpath)) node.classList.add("active");
      }
    });
  }
  // 处理对象类型的tab配置
  else if (typeof template.tab === "object") {
    activeitem = Object.keys(template.tab.nav)[activeindex];
    // 遍历导航项配置
    for (let item in template.tab.nav) {
      let t = template.tab.nav[item];

      // 根据when条件决定是否渲染该导航项
      if (!("when" in t)) {
        render_item();
      } else if (typeof t.when === "function") {
        if (t.when({ tab, t, data: nearest_data(tab) })) render_item();
      } else if (t.when) {
        render_item();
      }

      /**
       * 渲染单个导航项
       * - 创建tab-nav元素
       * - 设置内容和事件处理
       * - 处理hashpath相关逻辑
       */
      function render_item() {
        let t = template.tab.nav[item];
        let nav = document.createElement("tab-nav");
        render_helper(nav, template.tab.nav[item]);
        tab.appendChild(nav);
        thin_render(nav, t.t || item);

        // 处理hashpath相关的导航逻辑
        if (t.hashpath) {
          if (t.click) {
            let temp = t.click;
            t.click = function (e) {
              // 只在实际点击时更新URL
              if (e) history.pushState(null, null, t.hashpath.toLowerCase());
              if (temp) temp(e);
            };
          } else {
            nav.addEventListener("click", (ev) => {
              location.hash = t.hashpath;
            });
          }
          // 检查当前路径是否匹配，设置激活状态
          let reg = RegExp("^".concat(t.hashpath.toLowerCase(), "(?=$|/)"));
          if (reg.test(currenthashpath)) {
            activeindex = i;
            activeitem = item;
          }
          i++;
        }
      }
    }

    // 设置默认激活的标签页
    tab.childNodes[activeindex].classList.add("active");

    // 处理激活项的click事件
    let nav = template.tab.nav[activeitem];
    if (nav.click)
      after(() => {
        nav.click({ sender: tab, org_data: nearest_data(container) });
      }); // 将click函数压入afterqueue，当渲染结束时调用

    // 为所有导航项添加点击事件处理
    thin("tab-nav,a", tab).on("click", (ev) => {
      thin("tab-nav,a", tab).removeClass("active");
      ev.srcElement.closest("tab-nav,a").classList.add("active");
    });
  }
}
